<template>
    <div>
        <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            active-text-color="#fff"
            router
            unique-opened
        >
            <!-- LOGO -->
            <el-menu-item index="1" route="/">
                <el-image class="logo" :src="logo" fit="fit" />
            </el-menu-item>
            
            <!-- 一级分类 
            <el-menu-item index="0" route="/">首页</el-menu-item>
            <el-menu-item :index="1+index+''" v-for="(item, index) in nav" :key="index" v-text="item.name" :route="item.router"></el-menu-item>
             二级分类 
            <el-submenu :index="20+index+''" v-for="(item, index) in nav2" :key="20+index">
                <template slot="title">{{ item.name }}</template>
                <el-menu-item :index="99+index+''" v-for="(item, index) in item.list" :key="index" v-text="item.name" :route="item.router" class="menu"></el-menu-item>
            </el-submenu>
            -->

            <!-- 我的 -->
            <el-submenu index="233" class="menu-right">
                <template slot="title">
                    <el-avatar :src="user_data.photo?user_data.photo:photo" size="small" />
                </template>
                <!--
                <el-menu-item :index="233+index+''" v-for="(item,index) in user" :key="index" v-text="item.name" :route="item.router"></el-menu-item>
                /user/login
                -->
                <div v-if="user_data.login_type">
                    <el-menu-item index="9999" route="/user/index">个人中心</el-menu-item>
                    <el-menu-item index="/" @click="isExit">退出</el-menu-item>
                </div>
                <el-menu-item index="2" route="/user/login" v-else>登录</el-menu-item>
            </el-submenu>
            <!-- 搜索 -->
            <el-menu-item class="menu-right">
              <search />
            </el-menu-item>
            
        </el-menu>
    </div>
</template>

<script>
import { nav, nav2 } from '@/config/header.js'; // 导入配置文件
import search from '@/components/search'; // 搜索组件

import { mapState } from 'vuex';

export default {
    components:{
        search,
    },
    data() {
        return {
            logo: require('@/assets/img/logo.png'),
            activeIndex: '0',
            nav,
            nav2,
            photo: require('@/assets/img/test1.jpg'),
            // user,
        };
    },
    computed: {
        // 取值
        ...mapState({
            user: state => state.user.user,
            user_data: state => state.user.user_data
        })
    },
    methods: {
        isExit() {
            // cookie
            this.$cookies.remove('token');
            // Vuex
            this.$store.commit('user/user_exit');
        }
    }
}
</script>

<style lang="less" scoped>
.logo {
    width: 80px;
    height: auto;
}
.menu-right {
    float: right;
}
</style>